<template>
  <div class="moments-page">
    <!-- 顶部封面区域 -->
    <div class="moments-header">
      <div class="cover-image">
        <img 
          :src="userInfo.coverImage || 'https://img.js.design/assets/img/64846fc2498aa8d66ea3fb4b.png'" 
          alt="封面"
        >
      </div>
      <div class="user-info">
        <span class="nickname">{{ userInfo.nickName }}</span>
        <head-image :url="userInfo.headImage" :size="60" :name="userInfo.nickName"></head-image>
      </div>
    </div>

    <!-- 发布按钮 -->
    <div class="publish-btn">
      <el-button type="primary" @click="showPublish = true">
        <el-icon><Plus /></el-icon> 发布动态
      </el-button>
    </div>

    <!-- 动态列表 -->
    <moments-list 
      :moments="momentsList"
      @like="onLikeMoment"
      @comment="onComment"
      @delete="onDeleteMoment">
    </moments-list>

    <!-- 发布动态弹窗 -->
    <publish-moment 
      :visible="showPublish"
      @close="showPublish = false"
      @success="onPublishSuccess">
    </publish-moment>
  </div>
</template>

<script>
import MomentsList from '../components/moments/MomentsList.vue'
import PublishMoment from '../components/moments/PublishMoment.vue'
import HeadImage from '../components/common/HeadImage.vue'

export default {
  name: 'Moments',
  components: {
    MomentsList,
    PublishMoment,
    HeadImage
  },
  data() {
    return {
      showPublish: false,
      momentsList: [], // 朋友圈列表
      userInfo: {
        // 从 store 中获取用户信息
        nickName: this.$store.state.userStore.userInfo.nickName,
        headImage: this.$store.state.userStore.userInfo.headImage,
        coverImage: ''  // 封面图片，可以从后端获取或使用默认图片
      }
    }
  },
  methods: {
    loadMoments() {
      // 模拟朋友圈数据
      this.momentsList = [
        {
          id: 1,
          userId: 1,
          userInfo: {
            nickName: this.$store.state.userStore.userInfo.nickName,
            headImage: this.$store.state.userStore.userInfo.headImage
          },
          content: '今天天气真不错，分享一些照片 😊',
          images: [
            'https://picsum.photos/300/300?random=1',  // 使用 picsum 提供的随机图片
            'https://picsum.photos/300/300?random=2',
            'https://picsum.photos/300/300?random=3'
          ],
          createTime: new Date(),
          likes: [],
          comments: [
            {
              id: 1,
              userId: 2,
              userInfo: {
                nickName: '张三',
                headImage: 'https://picsum.photos/100/100?random=4'
              },
              content: '照片拍得真好！',
              createTime: new Date()
            }
          ]
        },
        {
          id: 2,
          userId: 1,
          userInfo: {
            nickName: this.$store.state.userStore.userInfo.nickName,
            headImage: this.$store.state.userStore.userInfo.headImage
          },
          content: '分享一个有趣的瞬间',
          images: [
            'https://img.js.design/assets/img/64847245498aa8d66ea3fb4e.png'  // 示例图片4
          ],
          createTime: new Date(Date.now() - 24 * 60 * 60 * 1000), // 一天前
          likes: [2, 3],  // 用户ID列表
          comments: []
        }
      ]
    },
    onLikeMoment(momentId) {
      const moment = this.momentsList.find(m => m.id === momentId)
      if (moment) {
        const userId = this.$store.state.userStore.userInfo.id
        const likeIndex = moment.likes.indexOf(userId)
        if (likeIndex === -1) {
          moment.likes.push(userId)
          this.$message.success('点赞成功')
        } else {
          moment.likes.splice(likeIndex, 1)
          this.$message.success('取消点赞')
        }
      }
    },
    onComment(momentId, content, replyTo) {
      const moment = this.momentsList.find(m => m.id === momentId)
      if (moment) {
        const comment = {
          id: Date.now(),
          userId: this.$store.state.userStore.userInfo.id,
          userInfo: {
            nickName: this.$store.state.userStore.userInfo.nickName,
            headImage: this.$store.state.userStore.userInfo.headImage
          },
          content: content,
          createTime: new Date()
        }
        
        if (replyTo) {
          const replyUser = moment.comments.find(c => c.userId === replyTo)
          if (replyUser) {
            comment.replyTo = {
              userId: replyUser.userId,
              nickName: replyUser.userInfo.nickName
            }
          }
        }
        
        moment.comments.push(comment)
        this.$message.success('评论成功')
      }
    },
    onDeleteMoment(momentId) {
      this.$confirm('确定要删除这条动态吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.momentsList.findIndex(m => m.id === momentId)
        if (index > -1) {
          this.momentsList.splice(index, 1)
          this.$message.success('删除成功')
        }
      }).catch(() => {})
    },
    onPublishSuccess(data) {
      const moment = {
        id: Date.now(),
        userId: this.$store.state.userStore.userInfo.id,
        userInfo: {
          nickName: this.$store.state.userStore.userInfo.nickName,
          headImage: this.$store.state.userStore.userInfo.headImage
        },
        content: data.content,
        images: data.images,
        createTime: new Date(),
        likes: [],
        comments: []
      }
      this.momentsList.unshift(moment)
      this.showPublish = false
      this.$message.success('发布成功')
    }
  },
  mounted() {
    this.loadMoments()
  }
}
</script>

<style lang="scss">
.moments-page {
  height: 100%;
  background: #f8f8f8;
  
  .moments-header {
    position: relative;
    height: 300px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    
    .cover-image {
      height: 100%;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .user-info {
      position: absolute;
      right: 20px;
      bottom: 20px;
      display: flex;
      align-items: center;
      
      .nickname {
        color: #fff;
        font-size: 18px;
        margin-right: 12px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }
    }
  }
  
  .publish-btn {
    padding: 15px 20px;
    background: #fff;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: right;
    
    .el-button {
      padding: 10px 20px;
      border-radius: 20px;
      
      i {
        margin-right: 4px;
      }
    }
  }
  
  .moments-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 20px;
  }
}
</style> 